<template>
	<view class="public-comment-box">
		<view class="seize-a-seat"></view>
		<view class="fixed" v-if="$_loginOrNot()">
			<!-- #ifndef H5 -->
			<view
				class="button-audio"
				@click="audioButtonState = !audioButtonState">
				<text :class="audioButtonState?'iconfont icon-text':'iconfont icon-yuyin'"></text>
			</view>
			<!-- #endif -->
			<textarea
				v-if="!audioButtonState"
				placeholder="说点什么吧..."
				placeholder-style="font-size: 28rpx;color:#C0C4CC;"
				v-model="content"
				maxlength="-1"
				:show-confirm-bar="false"
				cursor-spacing="300"
				:focus="focus"></textarea>
			<view
				@click="clickAudioButton"
				class="voiceButton"
				v-if="audioButtonState">
				{{audioButtonText}}
				{{audioButtonTextSecond?audioButtonTextSecond+'秒':''}}
			</view>
			<view
				@click="clickEmoji"
				class="button"
				style="padding-right: 15rpx;">
				<text class="iconfont icon-smile"></text>
			</view>
			<view
				@click="clickMore"
				class="button"
				style="padding-right:22rpx;"
				v-if="!content && !listImage && !listVideo && !listAudio">
				<text class="iconfont icon-add-circle"></text>
			</view>
			<view
				@click="clickPost"
				class="sending-button"
				v-if="content">发送</view>
		</view>
		<view class="fixed-emoji" v-if="listEmoji_state">
			<scroll-view scroll-y>
				<template v-if="listEmoji.length">
					<text
						@click="clickEmojiSelect(item)"
						v-for="item in listEmoji">{{item}}</text>
				</template>
				<template v-else>
					<public-loading></public-loading>
				</template>
			</scroll-view>
		</view>
		<view class="fixed-image" v-if="listImage">
			<view class="image">
				<image :src="listImage" mode="widthFix"></image>
			</view>
			<text
				@click="clikeDeleteImage"
				class="iconfont icon-close-bold"></text>
		</view>
		<view class="fixed-video" v-if="listVideo">
			<view
				@click="$_To('public/video?url=' + listVideo.videoUrl)"
				class="video"
				:style="'width: 100%;background: #EBEEF5 url('+listVideo.videoPosterUrl+');background-size: 100%;background-repeat: no-repeat;background-position: center;'">
				<text class="iconfont icon-play"></text>
			</view>
			<text
				@click="clikeDeleteVideo"
				class="iconfont icon-close-bold"></text>
		</view>
		<view class="fixed-audio" v-if="listAudio">
			<public-audio
				Css="width:350rpx;"
				:Url="listAudio"></public-audio>
			<text
				@click="clikeDeleteAudio"
				class="iconfont icon-close-bold"></text>
		</view>
		<template v-if="!$_loginOrNot()">
			<view class="fixed" @click="$_notLoggedInPrompt()">
				<view class="button-audio">
					<text class="iconfont icon-yuyin"></text>
				</view>
				<textarea
					placeholder="未登录 点我登录"
					placeholder-style="font-size: 28rpx;color:#C0C4CC;display: flex;align-items: center;justify-content: center;"
					disabled="false"></textarea>
				<view
					class="button"
					style="padding-right: 15rpx;">
					<text class="iconfont icon-smile"></text>
				</view>
				<view class="button" style="padding-right:22rpx;">
					<text class="iconfont icon-add-circle"></text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"public-comment-box",
		props:{
			Pid:{
				type:String,
				default:""
			},
			Cid:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				focus:false,
				editor:null,
				content:"",
				listEmoji:[],
				listEmoji_state:false,
				listImage:"",
				listVideo:"",
				listAudio:"",
				audioButtonState:false,
				audioButtonTextState:false,
				audioButtonText:"单击 说话",
				audioButtonTextSecond:0
			};
		},
		destroyed(){
			clearInterval(this.timer)
		},
		mounted(){
			uni.$on('aiteUser',(data) => {
				this.content += data.msg;
			})
			uni.$on('hashtag',(data) => {
				this.content += ' #'+data.msg+'# ';
			})
			uni.$on('preset',(data) => {
				this.content += data.msg;
			})
			this.getEditor();
		},
		onUnload() {
			clearInterval(this.timer)
			uni.$off('aiteUser')
			uni.$off('hashtag')
			uni.$off('preset')
		},
		methods: {
			// 请求编辑器配置
			getEditor(){
				this.$_Request(
					"GET","/api/v2/editor/comment/config",{},
					(res) => {
						this.editor = res.data.data;
					}
				)
			},
			// 点击Emoji表情按钮
			clickEmoji(){
				this.listEmoji_state = !this.listEmoji_state;
				this.focus = false;
				if(this.listEmoji_state){
					uni.request({
						url:this.$_Config() + "Config.json",
						method:'GET',
						success: (res) => {
							this.listEmoji = res.data.allEmoji;
						}
					})
				}
			},
			// 选中Emoji表情
			clickEmojiSelect(e){
				this.listEmoji_state = false;
				this.content += e;
				this.focus = true;
			},
			// 更多
			clickMore(){
				uni.showActionSheet({
					itemList: ['图片','视频','艾特','话题','预置语'],
					success: (res) => {
						// 图片
						if(res.tapIndex == 0){
							this.methodImage()
						}
						// 视频
						if(res.tapIndex == 1){
							this.methodVideo()
						}
						// 视频
						if(res.tapIndex == 2){
							this.$_To('editor/editorAceTex')
						}
						// 视频
						if(res.tapIndex == 3){
							this.$_To('editor/editorHashtag')
						}
						// 预置语
						if(res.tapIndex == 4){
							this.$_To('editor/preset')
						}
					}
				});
			},
			// 发表
			clickPost(){
				uni.showLoading({ title: "评论中" });
				if(this.listImage || this.listVideo || this.listAudio){
					this.putEditor();
				}else{
					// 创建草稿
					this.$_Request(
						"POST","/api/v2/editor/comment/create",
						{
							"createType":1,
							"commentPid":this.Pid,
							"commentCid":this.Cid,
							"content":this.content
						},
						(res) => {
							if(res.data.code == 0){
								this.draftId = res.data.data.detail.id;
								this.putEditor()
							}else{
								uni.showToast({
									title: res.data.message,
									icon: "none",
									duration: 1000
								});
								setTimeout(()=>{
									this.$_To('editor/draft?tab=2')
								},1000);
							}
						}
					)
				}
			},
			// 更新草稿
			putEditor(){
				this.$_Request(
					"PUT","/api/v2/editor/comment/" + this.draftId,
					{
						"commentPid":this.Pid,
						"commentCid":this.Cid,
						"content":this.content,
						"isMarkdown":true
					},
					(res) => {
						if(res.data.code == 0){
							this.postEditor()
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 发布提交
			postEditor(){
				this.$_Request(
					"POST","/api/v2/editor/comment/" + this.draftId, {},
					(res) => {
						if(res.data.code == 0){
							uni.hideLoading();
							this.content = "";
							this.listImage = "";
							this.listImageFid = "";
							this.listVideo = "";
							this.focus = false;
							this.listAudio = "";
							this.audioButtonState = false;
							this.audioButtonTextState = false;
							this.audioButtonText = "单击 说话";
							this.audioButtonTextSecond = 0;
							uni.$emit('commentListRenew',{msg:''})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			//视频操作方法
			methodVideo(){
				uni.chooseVideo({
					maxDuration:parseInt(this.editor.editor.toolbar.video.maxTime),
					success: (res) => {
						this.videoUpload(res.tempFilePath)
					}
				})
			},
			// 视频上传方法
			videoUpload(video){
				uni.showLoading();
				const _this = this;
				// 创建草稿
				_this.$_Request(
					"POST","/api/v2/editor/comment/create",
					{
						"createType":2,
						"commentPid":_this.Pid,
						"commentCid":_this.Cid,
						"content":_this.content
					},
					(res) => {
						if(res.data.code == 0){
							_this.draftId = res.data.data.detail.id;
							uni.uploadFile({
								url: _this.$_Url() + "/api/v2/common/upload-file",
								filePath: video,
								name: "file",
								header: _this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"comment_logs",
									"tableColumn":"id",
									"type":"video",
									"tableKey":"",
									"uploadMode":"file",
									"tableId":_this.draftId
								},
								success(res_a) {
									if(JSON.parse(res_a.data).code == 0){
										_this.listVideo = JSON.parse(res_a.data).data;
										_this.focus = true;
										uni.hideLoading();
									}else{
										uni.showToast({
											title: JSON.parse(res_a.data).message,
											icon: "none",
											duration: 1000
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
							setTimeout(()=>{
								this.$_To('editor/draft?tab=2')
							},1000);
						}
					}
				)
			},
			// 图片操作方法
			methodImage(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.imageUpload(res.tempFiles[0].path);
					}
				})
			},
			// 图片上传方法
			imageUpload(img){
				uni.showLoading();
				const _this = this;
				// 创建草稿
				_this.$_Request(
					"POST","/api/v2/editor/comment/create",
					{
						"createType":2,
						"commentPid":_this.Pid,
						"commentCid":_this.Cid,
						"content":_this.content
					},
					(res) => {
						if(res.data.code == 0){
							_this.draftId = res.data.data.detail.id;
							uni.uploadFile({
								url: _this.$_Url() + "/api/v2/common/upload-file",
								filePath: img,
								name: "file",
								header: _this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"comment_logs",
									"tableColumn":"id",
									"type":"image",
									"tableKey":"",
									"uploadMode":"file",
									"tableId":_this.draftId
								},
								success(res_a) {
									if(JSON.parse(res_a.data).code == 0){
										_this.listImage = JSON.parse(res_a.data).data.imageBigUrl;
										_this.listImageFid = JSON.parse(res_a.data).data.fid;
										_this.focus = true;
										uni.hideLoading();
									}else{
										uni.showToast({
											title: JSON.parse(res_a.data).message,
											icon: "none",
											duration: 1000
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
							setTimeout(()=>{
								this.$_To('editor/draft?tab=2')
							},1000);
						}
					}
				)
			},
			// 删除图片
			clikeDeleteImage(){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "图片删除中" });
							this.$_Request(
								"PUT", "/api/v2/editor/comment/" + this.draftId,
								{
									"deleteFile":this.listImageFid
								},
								(res) => {
									this.listImage = "";
									uni.hideLoading();
								}
							)
						}
					}
				});
			},
			// 删除视频
			clikeDeleteVideo(){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "视频删除中" });
							this.$_Request(
								"PUT", "/api/v2/editor/comment/" + this.draftId,
								{
									"deleteFile":this.listVideo.fid
								},
								(res) => {
									this.listVideo = "";
									uni.hideLoading();
								}
							)
						}
					}
				});
			},
			// 删除音频
			clikeDeleteAudio(){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "音频删除中" });
							this.$_Request(
								"PUT", "/api/v2/editor/comment/" + this.draftId,
								{
									"deleteFile":this.listAudioFid
								},
								(res) => {
									this.listAudio = "";
									this.audioButtonState = false;
									this.audioButtonTextState = false;
									this.audioButtonText = "单击 说话";
									this.audioButtonTextSecond = 0;
									this.content = "";
									this.focus = false;
									uni.hideLoading();
								}
							)
						}
					}
				});
			},
			// 点击录音按钮
			clickAudioButton(){
				this.audioButtonTextState = !this.audioButtonTextState;
				if(this.audioButtonTextState){
					uni.getRecorderManager().start();
					this.audioButtonText = "录制中";
					this.audioButtonTextSecond = 1;
					this.timer = setInterval(() => {
						this.audioButtonTextSecond += 1;
						if(this.audioButtonTextSecond == 59){
							this.audioButtonText = '单击 说话';
							this.audioButtonTextSecond = 1;
							this.audioButtonTextState = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.audioUpload(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.audioButtonText = '单击 说话';
					this.audioButtonTextSecond = 0;
					this.audioButtonTextState = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.audioUpload(res.tempFilePath)
					});
				}
			},
			// 音频上传
			audioUpload(audio){
				uni.showLoading();
				const _this = this;
				// 创建草稿
				_this.$_Request(
					"POST","/api/v2/editor/comment/create",
					{
						"createType":2,
						"commentPid":_this.Pid,
						"commentCid":_this.Cid,
						"content":_this.content
					},
					(res) => {
						if(res.data.code == 0){
							_this.draftId = res.data.data.detail.id;
							uni.uploadFile({
								url: _this.$_Url() + "/api/v2/common/upload-file",
								filePath: audio,
								name: "file",
								header: _this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"comment_logs",
									"tableColumn":"id",
									"type":"audio",
									"tableKey":"",
									"uploadMode":"file",
									"tableId":_this.draftId
								},
								success(res_a) {
									if(JSON.parse(res_a.data).code == 0){
										_this.listAudio = JSON.parse(res_a.data).data.audioUrl;
										_this.listAudioFid = JSON.parse(res_a.data).data.fid;
										_this.audioButtonState = false;
										_this.content = "...语音回复"
										_this.focus = true;
										uni.hideLoading();
									}else{
										uni.showToast({
											title: JSON.parse(res_a.data).message,
											icon: "none",
											duration: 1000
										});
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
							setTimeout(()=>{
								this.$_To('editor/draft?tab=2')
							},1000);
						}
					}
				)
			}
		},
	}
</script>

<style lang="scss" scoped>
.public-comment-box{
	.seize-a-seat{
		width: 100%;
		height: 101rpx;
	}
	.fixed{
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid $BianKuangSe;
		background: #f7f7f7;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		.button-audio{
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 0 0 22rpx;
			.icon-yuyin,.icon-text{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		textarea{
			margin: 0 15rpx;
			display: block;
			font-size: 28rpx;
			line-height: 35rpx;
			background: #FFF;
			height: 80rpx;
			padding: 0;
		}
		.voiceButton{
			margin: 0 15rpx;
			height: 80rpx;
			flex: 1;
			background: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.button{
			flex-shrink: 0;
			.iconfont{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		.sending-button{
			width: 150rpx;
			height: 60rpx;
			background: #07c160;
			margin-right: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
		}
	}
	.fixed-emoji{
		width: 600rpx;
		height: 800rpx;
		position: fixed;
		bottom: 150rpx;
		left: 75rpx;
		z-index: 999;
		background: #FFF;
		box-shadow: 0 0 10rpx #999;
		display: flex;
		align-items: center;
		justify-content: center;
		scroll-view{
			width: 560rpx;
			height: 770rpx;
			padding-bottom: 30rpx;
			text{
				display: inline-block;
				font-size: 50rpx;
				line-height: 50rpx;
				padding: 30rpx 10rpx 0 10rpx;
			}
		}
	}
	.fixed-image{
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		position: fixed;
		bottom: 126rpx;
		left: 25rpx;
		border: 5rpx solid #FFF;
		box-shadow: 0 0 5rpx $ZhanWeiSe;
		background: #FFF;
		z-index: 99;
		.image{
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.iconfont{
			display: flex;
			align-items: center;
			justify-content: center;
			background: $HongSe;
			color: #FFF;
			font-size: 30rpx;
			line-height: 30rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 2;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.fixed-video{
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		position: fixed;
		bottom: 126rpx;
		left: 25rpx;
		border: 5rpx solid #FFF;
		box-shadow: 0 0 5rpx $ZhanWeiSe;
		background: #FFF;
		z-index: 99;
		.video{
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon-play{
				font-size: 80rpx;
				line-height: 80rpx;
				color: #FFF;
				text-shadow: 0 0 5rpx #000;
			}
		}
		.icon-close-bold{
			display: flex;
			align-items: center;
			justify-content: center;
			background: $HongSe;
			color: #FFF;
			font-size: 30rpx;
			line-height: 30rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 2;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.fixed-audio{
		position: fixed;
		bottom: 126rpx;
		left: 25rpx;
		width: 700rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon-close-bold{
			padding-left: 15rpx;
		}
	}
}
</style>